<template>
  <global-header @clickLogin="isClickLogin = true; isClickSignup = false"
    @clickSignup="isClickSignup = true; isClickLogin = false" @clickUserInfo="isShowUserInfo = true"></global-header>
  <div v-if="isClickLogin">
    <Login @closeLogin="isClickLogin = false"></Login>
  </div>
  <div v-if="isClickSignup">
    <Signup @closeSignup="isClickSignup = false" @clickLogin="isClickLogin = true; isClickSignup = false"></Signup>
  </div>
  <div v-show="isShowUserInfo">
    <user-center @closeUserInfo="isShowUserInfo = false"></user-center>
  </div>
  <Wall></Wall>
  <!-- 背景 -->
  <video src="./assets/树叶飘摇.mp4" autoplay loop muted></video>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import GlobalHeader from './components/GlobalHeader.vue'
import Wall from './components/Wall.vue'
import Login from './components/Login.vue'
import Signup from './components/Signup.vue'
import UserCenter from './components/UserCenter.vue'

export default defineComponent({
  components: { GlobalHeader, Wall, Login, Signup, UserCenter },
  setup() {
    // 是否点击了登录
    const isClickLogin = ref(false)

    // 是否点击了注册
    const isClickSignup = ref(false)

    // 是否点击了用户头像
    const isShowUserInfo = ref(false)

    return { isClickLogin, isClickSignup, isShowUserInfo }
  }
})
</script>

<style lang="less">
video {
  position: fixed;
  top: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  opacity: 0.1;
}
</style>